<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="com.laputa.service.model.MainFrameData"%>
<%@ page import="com.laputa.model.User"%>
<%@ page import="com.laputa.service.model.FriendListData"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
    <head>
    <base href="<%=basePath%>">	
    <title>Main</title>
    <style type="text/css">
    /*<![CDATA[*/
      body {
          color: #000000;
          background-color: #FFFFFF;
	  font-family: Arial, "Times New Roman", Times, serif;
          margin: 10px 0px;
      }

    
    a:link, a:visited {
        color: blue
    }

    th {
        font-family: Verdana, "Times New Roman", Times, serif;
        font-size: 110%;
        font-weight: normal;
        font-style: italic;
        background: "write";
        text-align: left;
    }

    td {
        color: #000000;
	font-family: Arial, Helvetica, sans-serif;
    }
    
    td.menu {
        background: "write";
    }

    .center {
        text-align: center;
    }

    .code {
        color: #000000;
        font-family: "Courier New", Courier, monospace;
        font-size: 110%;
        margin-left: 2.5em;
    }
    
     #banner {
        margin-bottom: 12px;
     }

     p#congrats {
         margin-top: 0;
         font-weight: bold;
		 font-size: 60;
         text-align: center;
     }

     p#footer {
         text-align: right;
         font-size: 80%;
     }
     /*]]>*/
   </style>
  
	
</head>
		<% 
			List<User> friends = ((FriendListData) request.getAttribute("friendListData")).getUserList();
			User[] arrayFriends = friends.toArray(new User[] {});
			int num;
		%>

<script language="javascript">
	function reset(userNum)
	{
		var tb = document.getElementById('friendInfo');
		var rowNum=tb.rows.length;
		for (i=0;i<rowNum;i++) 
		{
			tb.deleteRow(i);
			rowNum=rowNum-1;
			i=i-1;
		}
		<% num = 0; %>
		for (i = 0; i < userNum; ++i)
			<% num++; %>
		var newRow = tb.insertRow(0);  
		var userName = "<%=arrayFriends[num].getName()%>";
		var line;
		line = "<tr align=\"center\">" + "<td align=\"center\" valign = \"top\"><font size=\"6\"> Name:"		
		line = line + userName + "</font></td></tr>"
		newRow.insertCell(0).innerHTML=line;
		
		var newRow = tb.insertRow(1);  
		var userEmail = "<%=arrayFriends[num].getEmail()%>";
		line = "<tr align=\"center\">" + "<td align=\"center\" valign = \"top\"><font size=\"6\"> Email:"		
		line = line + userEmail + "</font></td></tr>"
		newRow.insertCell(0).innerHTML=line;
		
		var newRow = tb.insertRow(2);  
		var userID = "<%=arrayFriends[num].getId()%>";
		line = "<tr align=\"center\">" + "<form method=\"post\" action=\"friendList.do\">";
		line = line + "<input type=\"hidden\" name=\"userID\" value=\"+ userID + "\"/>";
		line = line + "<input type=\"submit\" name=\"showSingle\" value=\"watch\"/><br/>";
		line = line + "</form></tr>"
		newRow.insertCell(0).innerHTML=line;
	}
</script>

<body>

<table id="banner" width="100%">
    <tr>
		<td align="right">
			<a href="mainFrame.jsp"/>
			Back To Homepage
		</td>
    </tr>
	<tr>
		<td align="right"><font color="green" size=4> Click the friend's name to watch his/her information!</font></td>
	</tr>
</table>

<table width="250" border="0" cellspacing="0" cellpadding="0" align="right"> 	
	<tr>		
		<%
			for (int i=0; i < arrayFriends.length; i++)
			{
				User user = arrayFriends[i];				
			  	String friendName = user.getName();
				out.print("<tr align=\"center\">");
				out.print("<td align=\"center\" valign = \"top\" onclick=reset(" + i + ")><font color=\"blue\" size=\"5\">" +  friendName + "</font></td>");
				out.print("</tr>");
			}
		%>
	</tr>
</table>

<table id="friendInfo" width="550" border="0" cellspacing="0" cellpadding="0" align="right"> 
</table>

</body>
</html>
